<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.pink-blue.min.css" />
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
    <form action="get_table">
      <table class="mdl-data-table mdl-js-data-table  mdl-shadow--2dp" style="margin:100px auto">
  <thead>
    <tr>
      <th id = "thead">目的地址</th>
      
        
    </tr>
  </thead>
  <tbody id = "table">
    

  </tbody>
</table>
    </form>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="id1">
    <label class="mdl-textfield__label" for="id1">Text...</label>
  </div>
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="add()">
  Button
</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="submit()">
  Button2
</button>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>

<script>
    function add()
  {
    var id = $('#table')
    id.append("<tr><td>"+$("#id1").val()+"</td></tr>")

    $("#id1").val("");

  }
  function submit()
  {
    var ret =[];
    var j = 0;
    var table = $("#table tr").each(function(){
      var td = $(this).children();
      console.log(td.length);
      
      ret[j++] = td.eq(0).text();
    });
    console.log(ret);
    console.log(JSON.stringify({"data":ret}));
    $.ajax({
      type:"POST",
      url:"get_dest",
      data:JSON.stringify({
        "data":ret
      })
    }).done(function(data){
      $("#thead").text("转发接口");
      var j = 0;
      var table = $("#table tr").each(function(){
      var td = $(this).children();
      
      td.eq(0).text(data.data[j++])
      
    });
    })
  }
</script>
</body>
</html>